<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优化版抓娃娃机游戏</title>
    <style>
        body { margin: 0; background: #fce4ec; font-family: sans-serif; text-align: center; overflow: hidden; }
        #game { position: relative; width: 100%; height: 500px; background: #fff3e0; border: 3px solid #ff80ab; overflow: hidden; margin: 0 auto; }
        .claw { position: absolute; top: 0; left: 50%; transition: left 0.1s; }
        .rope { width: 4px; height: 100px; background: #cccccc; margin: 0 auto; position: relative; }
        .rope::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 4px; background: #999; }
        .claw-head { width: 50px; height: 20px; background: #999; border-radius: 5px; margin: 5px auto 0; position: relative; }
        .claw-pincer { position: absolute; bottom: -10px; width: 15px; height: 15px; background: #999; border-radius: 3px; transition: transform 0.3s; }
        .claw-pincer.left { left: 5px; transform: rotate(-15deg); }
        .claw-pincer.right { right: 5px; transform: rotate(15deg); }
        .claw-pincer.closed.left { transform: rotate(-30deg); }
        .claw-pincer.closed.right { transform: rotate(30deg); }
        
        /* 基础娃娃样式 */
        .doll { position: absolute; bottom: 10px; width: 50px; height: 50px; border: 2px solid #d81b60; text-align: center; line-height: 50px; font-weight: bold; color: #fff; }
        /* 被抓住的娃娃样式 */
        .claw .doll { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); margin: 0; z-index: 10; }
        
        /* 多种娃娃样式 */
        .doll-type1 { background: pink; border-radius: 50%; }
        .doll-type2 { background: #a1caf1; border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
        .doll-type3 { background: #b7f0b7; border-radius: 30% 70% 50% 50% / 30% 30% 70% 70%; }
        .doll-type4 { background: #ffd1dc; border-radius: 50% 50% 40% 60% / 60% 40% 50% 50%; }
        .doll-type5 { background: #fffacd; border-radius: 20px; }
        
        #info { font-size: 20px; margin: 10px; color: #d81b60; font-weight: bold; }
        #controls { margin-top: 20px; }
        button { margin: 5px 10px; padding: 10px 20px; border: none; background: #ff4081; color: white; border-radius: 5px; cursor: pointer; }
        button:hover { background: #e91e63; }
        .keyboard-hint { color: #666; margin-top: 10px; font-size: 14px; }
        .score-badge { position: absolute; top: -10px; right: -10px; background: #ff4081; color: white; border-radius: 50%; width: 20px; height: 20px; font-size: 12px; line-height: 20px; }
    </style>
</head>
<body>
    <h1>🎡 抓娃娃机</h1>
    <div id="info">剩余时间: 120 秒 | 得分: 0 | 已尝试: 0/5</div>
    <div id="game">
        <div id="claw" class="claw">
            <div class="rope"></div>
            <div class="claw-head">
                <div class="claw-pincer left"></div>
                <div class="claw-pincer right"></div>
            </div>
        </div>
    </div>
    <div id="controls">
        <button onclick="catchDoll()">🎁 抓取</button>
        <div class="keyboard-hint">提示：使用键盘 ← → 键左右移动抓手 | 空格键抓取</div>
        <div class="keyboard-hint">不同娃娃有不同分值！</div>
    </div>
    <audio id="successSound" preload="auto">
        <source src="SUCCESS_SOUND_URL" type="audio/mpeg">
    </audio>
    <audio id="failSound" preload="auto">
        <source src="FAIL_SOUND_URL" type="audio/mpeg">
    </audio>

    <script>
        const game = document.getElementById("game");
        const claw = document.getElementById("claw");
        const info = document.getElementById("info");
        const successSound = document.getElementById("successSound");
        const failSound = document.getElementById("failSound");
        
        let clawTop = 0;
        let clawLeft = game.clientWidth / 2 - 25;
        let timeLeft = 120;
        let score = 0;
        let dolls = [];
        let dollId = 0;
        let gameStarted = false;
        let gameOver = false;
        let timer, dollGen, dollMove;
        let attempts = 0;
        let maxAttempts = 5;
        const dollSpacing = 120;
        let lastDollPosition = game.clientWidth;
        let isGrabbing = false;
        
        // 娃娃类型配置（样式类和分值）
        const dollTypes = [
            { className: "doll-type1", score: 1, emoji: "🐰" },
            { className: "doll-type2", score: 2, emoji: "🐱" },
            { className: "doll-type3", score: 3, emoji: "🐻" },
            { className: "doll-type4", score: 2, emoji: "🐶" },
            { className: "doll-type5", score: 4, emoji: "🐼" }
        ];

        document.addEventListener('keydown', (e) => {
            if (gameOver || isGrabbing) return;
            switch(e.key) {
                case 'ArrowLeft':
                    moveClaw('left');
                    break;
                case 'ArrowRight':
                    moveClaw('right');
                    break;
                case ' ':
                    catchDoll();
                    break;
            }
        });

        function startGame() {
            if (gameStarted) return;
            gameStarted = true;
            timer = setInterval(() => {
                timeLeft--;
                updateInfo();
                if (timeLeft <= 0) {
                    endGame("⏰ 时间到！游戏结束！ 总分: " + score);
                }
            }, 1000);

            createDoll();
            dollGen = setInterval(() => {
                createDoll();
            }, 2000);

            dollMove = setInterval(() => {
                dolls.forEach((doll, index) => {
                    let x = parseInt(doll.style.left);
                    doll.style.left = (x - 2) + "px";
                    if (x < -60) {
                        doll.remove();
                        dolls.splice(index, 1);
                    }
                });
            }, 30);
        }

        function createDoll() {
            const doll = document.createElement("div");
            // 随机选择娃娃类型
            const randomType = dollTypes[Math.floor(Math.random() * dollTypes.length)];
            
            doll.className = `doll ${randomType.className}`;
            doll.innerText = randomType.emoji;
            doll.style.left = lastDollPosition + dollSpacing + "px";
            doll.style.bottom = "10px";
            doll.dataset.id = dollId++;
            doll.dataset.score = randomType.score; // 存储娃娃分值
            
            // 添加分值标记（高分值娃娃）
            if (randomType.score > 2) {
                const scoreBadge = document.createElement("span");
                scoreBadge.className = "score-badge";
                scoreBadge.innerText = randomType.score;
                doll.appendChild(scoreBadge);
            }
            
            game.appendChild(doll);
            dolls.push(doll);

            if (!gameStarted) startGame();
        }

        function moveClaw(direction) {
            if (gameOver || isGrabbing) return;
            const moveStep = 15;
            if (direction === "left") {
                clawLeft = Math.max(0, clawLeft - moveStep);
            } else if (direction === "right") {
                clawLeft = Math.min(game.clientWidth - 50, clawLeft + moveStep);
            }
            claw.style.left = clawLeft + "px";
        }

        function playSound(type) {
            if (type === 'success' && successSound) {
                successSound.play().catch(e => console.log("成功音效播放失败:", e));
            } else if (type === 'fail' && failSound) {
                failSound.play().catch(e => console.log("失败音效播放失败:", e));
            }
        }

        function catchDoll() {
            if (gameOver || isGrabbing || attempts >= maxAttempts) return;
            
            isGrabbing = true;
            attempts++;
            updateInfo();
            
            const pincers = document.querySelectorAll('.claw-pincer');
            let clawBottom = 0;
            const dropSpeed = 5;
            const riseSpeed = 3;
            let caughtDoll = null;
            let dollScore = 0;

            const dropInterval = setInterval(() => {
                clawBottom += dropSpeed;
                document.querySelector('.rope').style.height = (100 + clawBottom) + "px";
                
                if (!caughtDoll) {
                    dolls.forEach((doll, index) => {
                        const dollRect = doll.getBoundingClientRect();
                        const clawRect = claw.getBoundingClientRect();
                        
                        if (
                            clawRect.left < dollRect.right &&
                            clawRect.right > dollRect.left &&
                            clawRect.bottom + clawBottom > dollRect.top &&
                            clawRect.top < dollRect.bottom
                        ) {
                            // 抓住娃娃
                            caughtDoll = doll;
                            dollScore = parseInt(caughtDoll.dataset.score);
                            game.removeChild(caughtDoll);
                            dolls.splice(index, 1);
                            claw.appendChild(caughtDoll);
                            caughtDoll.style.left = "50%";
                            caughtDoll.style.bottom = "-30px";
                            caughtDoll.style.transform = "translateX(-50%)";
                            caughtDoll.style.margin = "0";
                        }
                    });
                }

                if (clawBottom >= 300 || caughtDoll) {
                    clearInterval(dropInterval);
                    
                    if (caughtDoll) {
                        pincers.forEach(p => p.classList.add('closed'));
                        playSound('success');
                        score += dollScore; // 根据娃娃类型加分
                        updateInfo();
                        
                        const riseInterval = setInterval(() => {
                            clawBottom -= riseSpeed;
                            document.querySelector('.rope').style.height = (100 + clawBottom) + "px";
                            
                            if (clawBottom <= 0) {
                                clearInterval(riseInterval);
                                pincers.forEach(p => p.classList.remove('closed'));
                                claw.removeChild(caughtDoll);
                                isGrabbing = false;
                            }
                        }, 20);
                    } else {
                        playSound('fail');
                        alert("😢 未抓到娃娃！");
                        
                        const riseInterval = setInterval(() => {
                            clawBottom -= riseSpeed;
                            document.querySelector('.rope').style.height = (100 + clawBottom) + "px";
                            
                            if (clawBottom <= 0) {
                                clearInterval(riseInterval);
                                isGrabbing = false;
                                
                                if (attempts >= maxAttempts) {
                                    endGame("😢 超过 " + maxAttempts + " 次未成功抓到娃娃，游戏失败！");
                                }
                            }
                        }, 20);
                    }
                }
            }, 20);
        }

        function updateInfo() {
            info.innerText = "剩余时间: " + timeLeft + " 秒 | 得分: " + score + " | 已尝试: " + attempts + "/" + maxAttempts;
        }

        function endGame(message) {
            clearInterval(timer);
            clearInterval(dollGen);
            clearInterval(dollMove);
            gameOver = true;
            alert(message);
        }

        window.addEventListener('resize', () => {
            if (!gameStarted) {
                clawLeft = game.clientWidth / 2 - 25;
                claw.style.left = clawLeft + "px";
            }
        });

        createDoll();
    </script>
</body>
</html>